import { Avatar, Tag, Button } from 'antd'
import Image from 'next/image'
import { icons } from './dataSet'

const HomeHeader = ({ children }) => {
  return (
    <div className="flex justify-between p-15px h-280px">
      {/* 头像 */}
      <div className="relative">
        <Avatar
          className="shadow-[0px_10px_10px_rgba(0,0,0,0.25)]"
          size={200}
          src={
            <img
              src="https://foruda.gitee.com/avatar/1713014563060892875/9756790_lu147721_1713014563.png!avatar200"
              alt="avatar"
            />
          }
        />
        <div className="p-5px absolute bottom-0 w-[100%] flex justify-between">
          {icons.map((icon, index) => (
            <Button key={index} type="primary" title={icon.text} className="btn-common bg-[rgba(149,147,147,0.7)]! ">
              <Image className="v-middle hover:scale-110" width={24} height={24} src={icon.src} alt={icon.alt} />
            </Button>
          ))}
        </div>
      </div>
      {/* 欢迎text */}
      <div className="w-[100%] ml-30px">
        <div className="h-[50%] text-60px m-auto font-bold lh-130px">
          hello I&apos;m <i className="colorful-spin">Luts</i>
        </div>
        <div className="h-[50%] flex flex-col justify-around text-24px">
          <p>
            <Image className="v-middle" width={24} height={24} src="/download/incon/jiqiren.svg" alt="机器人" />
            &nbsp;
            <Tag bordered={false} color="processing">
              <i className="text-24px text-blue">Front stage</i>
            </Tag>
            development engineer.
          </p>
          <p>
            <Image className="v-middle" width={24} height={24} src="/download/incon/ufo外星人.svg" alt="ufo外星人" />
            &nbsp;This is a
            <Tag bordered={false} color="cyan">
              <i className="text-24px text-emerald">Next.js</i>
            </Tag>
            project.
          </p>
          <p>
            <Image className="v-middle" width={24} height={24} src="/download/incon/外星人.svg" alt="外星人" />
            &nbsp;In the previous exploration stage, I am still a novice.
          </p>
          <p>
            <Image
              className="v-middle"
              width={24}
              height={24}
              src="/download/incon/卫星接收探索.svg"
              alt="卫星接收探索"
            />
            &nbsp;There is still a lot to learn ...
          </p>
        </div>
      </div>
    </div>
  )
}

export default HomeHeader
